<template>
  <div>
    <div class="mHead">
      <el-image :src="vals" class="image" width="100%" height="100%" />
    </div>
    <div style="width: 100%; height: 50px">
      <span
        style="
          font-size: large;
          color: white;
          display: flex;
          float: left;
          font-family: 'Arial Black';
        "
        >{{ movie.mname }}</span
      >
    </div>
    <div style="width: 100%; height: 40px">
      <span
        style="
          font-size: small;
          color: white;
          display: flex;
          float: left;
          font-family: 'Arial Black';
        "
        >{{ movie.nickname }}</span
      >
    </div>
    <div style="width: 100%; height: 40px">
      <el-tag type="warning" style="margin-left: 2%; font-size: 10px">{{ movie.mlanguage }}</el-tag>
      <el-tag type="warning" style="margin-left: 2%; font-size: 10px">{{ movie.mtype }}</el-tag>
      <el-tag type="warning" style="margin-left: 2%; font-size: 10px"
        >{{ movie.duration }}分钟</el-tag
      >
    </div>
    <div style="width: 100%; height: 40px">
      <span
        style="
          font-size: small;
          display: flex;
          float: left;
          color: white;
          font-family: 'Arial Black';
        "
        >导演：{{ movie.director }}</span
      >
    </div>
    <div style="width: 100%; height: 40px">
      <span
        style="
          font-size: small;
          display: flex;
          float: left;
          color: white;
          font-family: 'Arial Black';
        "
        >主演：{{ movie.mrole }}</span
      >
    </div>
  </div>
</template>
<script setup>
import axios from 'axios';
import { ElMessage } from 'element-plus';
import { ref, onMounted } from 'vue';
import emmitter from '@/utils/bus';
const movie = ref('');
const vals = ref();
onMounted(() => {
  const movieName = JSON.parse(sessionStorage.getItem('movieInfo'));
  axios.get('/api/movie/getMovieByMname/' + movieName).then(res => {
    if (res.data !== null) {
      movie.value = res.data[0];
      vals.value = require('../../../assets/' + res.data[0].pic);
      emmitter.emit('movieEvent', movie.value);
    } else {
      ElMessage({
        showClose: true,
        message: '网络错误！',
        type: 'error',
      });
    }
  });
});
</script>
<style lang="scss" scoped>
.mHead {
  width: 150px;
  height: 190px;
  margin-top: 1px;
  display: flex;
  float: left;
}
</style>
